<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<title>计算文本</title>
		<style type="text/css">
			html,body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				box-sizing: border-box;
			}
			.yingbing-computed-wrapper {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
			}
			.yingbing-img {
				max-width: 100%!important;
				max-height: 100%!important;
			}
		</style>
	</head>
	<body>
		<div class="yingbing-computed-wrapper"></div>
	</body>
	<script type="text/javascript" src="./js/uni-webview-js@1.5.4.js"></script>
	<script type="text/javascript">
		var htmlChars = ['㊦', '㊟', '㊨', '㊧'],
		windowHeight = 0,//窗口高度
		pages = [],//渲染页面数组
		chapter = {},//章节内容临时存储
		contents = [],//内容转化数组
		startTags = [],//临时存储被切割的开始标签
		handleTimer = null//定时处理器
		fontSize = 0,
		fontFamily = '',
		lineHeight = 0,
		totalChapter = 0
		//外层包裹div，设置公共样式（为了兼容微信小程序）
		function getContent (content) {
			return `<div class="yingbing-computed-content-html" style="font-family:${fontFamily};font-size:${fontSize}px;line-height:${lineHeight}px;">` + content.replace('<whole-render', '<div').replace('<\/whole-render>', '<\/div>') + '</div>'
		}
		function start (c, s) {
			destroyHandleTimer()
			chapter = c//记录章节内容
			fontSize = s.fontSize
			fontFamily = s.fontFamily
			lineHeight = s.lineHeight
			totalChapter = s.totalChapter
			windowHeight = document.body.offsetHeight;
			if ( !chapter.content ) {
				handleSuccess()
				return
			}
			let content = chapter.content
			const fullStyle = 'box-sizing:border-box;overflow:hidden;height:' + windowHeight + 'px'//full-box的样式
			content = content.replace(/<full-box.*?>/g, function(item){
			    if(item.includes('style=')){
			        return item.replace(/style="(.*?)(?=\")/, 'style="' + fullStyle +';$1');
			    }else{
			        return item.replace(/\<full-box/, '<full-box style="'+fullStyle+'" $1');
			    }
			})//给所有full-box添加全部高度
			content = content.replace(/<full-box/g, '<whole-render')//将full-box标签替换为whole-render
			content = content.replace(/<\/full-box>/g, '</whole-render>')//将full-box标签替换为whole-render
			const imgClassName = 'yingbing-img'//img类名
			content = content.replace(/<img.*?>/g, function(item){
			    if(item.includes('class=')){
			        return item.replace(/class="(.*?)(?=\")/, 'class="$1 '+imgClassName);
			    }else{
			        return item.replace(/\<img (.*?)(?=\")/, '<img class="'+imgClassName+'" $1');
			    }
			})//给所有img添加class[yingbing-img] 设置img公共样式（为了兼容微信小程序）
			content = content.replace(/\r|\n/g, '<br/>')//将\n|\r替换为换行符
			content = content.replace(/\t/g, '')//将\t删除
			contents = contentToArr(content)//初始化内容，并将文本内容转为数组
			computedPage()
		}
		//将文本内容转为数组
		function contentToArr (content) {
			let temp = null
			let originContent = content
			const wholeRegTags= ['whole-render', 'full-box', 'button', 'video', 'audio', 'iframe']//需要整块渲染的标签
			const singleRegTags = ['img', 'hr', 'input', 'video', 'audio', 'iframe']//非闭合标签
			const wrapTags = [], wholeTags = [], endTags = [], startTags = []
			//将整块渲染的标签替换为㊟符号保存
			const wholeTagReg = new RegExp(`<(${wholeRegTags.join('|')})>*([\\s\\S]*?)<\/(${wholeRegTags.join('|')})>|<(${singleRegTags.join('|')})[^>]+>`)
			while ( (temp = originContent.match(wholeTagReg)) != null ) {
				wholeTags.push(temp[0])
				originContent = originContent.substring(0, temp.index) + htmlChars[1] + originContent.substring(temp.index + temp[0].length)
			}
			//将换行标签替换为㊦符号保存
			const wrapTagReg = new RegExp(`<br[^>]+>`)
			while ( (temp = originContent.match(wrapTagReg)) != null ) {
				wrapTags.push(temp[0])
				originContent = originContent.substring(0, temp.index) + htmlChars[0] + originContent.substring(temp.index + temp[0].length)
			}
			//将结束标签替换为㊨符号保存
			const endTagReg = new RegExp(`<\/[^>]+>`)//结束标签
			while ( (temp = originContent.match(endTagReg)) != null ) {
				endTags.push(temp[0])
				originContent = originContent.substring(0, temp.index) + htmlChars[2] + originContent.substring(temp.index + temp[0].length)
			}
			//将开始标签替换为㊧符号保存
			const startTagReg = new RegExp(`<[^>]+>`)//开始标签
			while ( (temp = originContent.match(startTagReg)) != null ) {
				startTags.push(temp[0])
				originContent = originContent.substring(0, temp.index) + htmlChars[3] + originContent.substring(temp.index + temp[0].length)
			}
			//将字符内容分割为数组
			const arr = originContent.split('')
			return arr.map((char, key) => {
				if ( htmlChars.indexOf(char) == -1 ) return char//非标签内容直接返回
				else {//标签内容转化为真实标签再返回
					let index = -1
					for ( let j = 0; j < key + 1; j++ ) if ( originContent.charAt(j) == char ) index++
					const tags = char == '㊦' ? wrapTags : char == '㊟' ? wholeTags : char == '㊨' ? endTags : startTags
					return index > -1 ? char + ':' + tags[index] : char
				}
			})
		}
		//计算页面
		function  computedPage () {
			const start = pages.length > 0 ? pages[pages.length-1].end : 0//获取字符开始位置
			//新增页面
			pages.push( Object.assign({}, chapter, {
				content: '',
				contents: [],
				type: 'text',
				start: start,
				end: 0,
			}) )
			const div = document.createElement('DIV')
			div.setAttribute('class', 'yingbing-page-' + pages.length)
			document.querySelector('.yingbing-computed-wrapper').appendChild(div)
			//给页面添加内容
			addText(start)
		}
		//增加内容
		function addText (start) {
			let text = '',//渲染内容临时存储
			end = 0,//结束位置
			lt = startTags.length,//开始标签数量
			rt = 0//结束标签数量
			if ( startTags.length > 0 ) text += startTags.map(t => t.split('+')[1]).join('')//如果存在被切割的开始标签添加到内容最前面
			//截取字符 渲染
			for ( let i = start; i < contents.length; i++ ) {
				end = i//记录结束位置
				const char = contents[i]
				text += char//拼接文本
				if ( htmlChars.findIndex(c => char.indexOf(c)) > -1 ) {//如果是标签内容
					if ( char.indexOf(htmlChars[0] + ':') > -1 && lt == rt ) break;//如是换行标签并且开始标签和结束标签数量一致时直接开始渲染
					if ( char.indexOf(htmlChars[3] + ':') > -1 ) lt++//开始标签+1
					if ( char.indexOf(htmlChars[2] + ':') > -1 ) rt++//结束标签+1
					if ( lt == rt ) break;//如果开始标签数量等于结束标签则直接渲染
				}
			}
			startTags = []
			pages[pages.length-1].content += text.replace(new RegExp(`(${htmlChars.join('|')}):`, 'g'), '')// 开始渲染内容
			pages[pages.length-1].end = end//记录结束位置
			const handle = () => {
				destroyHandleTimer()
				if ( height <= windowHeight ) {//如果内容高度小于或等于窗口高度
					if ( end < contents.length - 1 ) {//如果内容还没有渲染完
						const subheight = windowHeight - height//页面剩余高度
						if ( subheight > lineHeight ) addText(end+1)//当前剩余高度大于行高，则继续增加内容
						else {
							pages[pages.length-1].end = end + 1//如果是增加内容时完成本页计算，结束位置要加1
							computedPage()//否则开始计算下一页
						}
					} else {
						pages[pages.length-1].end = end + 1//如果是增加内容时完成章节计算，结束位置要加1
						handleSuccess()//页面计算完毕开始返回
					}
				} else {
					//如果内容高度大于窗口高度开始减少内容
					subText()
				}
			}
			let height = 0
			const div = document.querySelector('.yingbing-page-' + pages.length)
			div.innerHTML = getContent(pages[pages.length-1].content)
			if ( /<(img|video|audio|iframe)/.test(text)) {
				handleTimer = window.setTimeout(() => {
					height = div.offsetHeight
					handle()
				}, 1000)
			} else {
				height = div.offsetHeight
				handle()
			}
		}
		//减少内容
		function subText () {
			const page = pages[pages.length - 1]//获取最后一页渲染数据
			let contents1 = contentToArr(page.content),//将当前页内容转化为数组
			end = page.end,//结束位置减1
			index = 0,//字符索引
			endTags = []//结束字符临时存储
			contents1.reverse()//反转文本内容集合
			const handle = () => {
				let lts = [],//存储开始标签
				rts = []//存储结束标签
				end--//结束位置减1
				const char = contents1[index]//获取文本内容最后一位
				if ( char.indexOf(htmlChars[2] + ':') > -1 ) {//如果最后一位是结束标签
					let startIndex = 0//存储结束标签对应开始标签的位置
					for ( let i = index; i < contents1.length; i++ ) {//循环字符集合，找到结束标签对应的开始标签
						const char1 = contents1[i]
						if ( char1.indexOf(htmlChars[2] + ':') > -1 ) rts.unshift(char1)//如果标签是结束标签加入rts集合
						if ( char1.indexOf(htmlChars[3] + ':') > -1 ) lts.push(char1)//如果标签是开始标签加入lts集合
						if ( lts.length == rts.length ) break//如果开始标签数量等于结束标签时中段循环
						startIndex = i
					}
					if ( lts.length > 0 ) startTags.push(startIndex + '+' + lts[lts.length-1])//将结束最后一位结束标签对应的开始标签加入startTags
					endTags.unshift(startIndex + '+' + char)//存储结束标签，用于最后的拼接
				}
				if ( char.indexOf(htmlChars[3] + ':') > -1 ) {//如果最后一位是开始标签
					const startIndex = startTags.findIndex(t => t.indexOf(index + '+') > -1)//获取当前开始标签在startTags中的位置
					const endIndex = endTags.findIndex(t => t.indexOf(index + '+') > -1)//获取当前开始标签在endTags中对应的结束标签位置
					startTags.splice(startIndex, 1)//删除记录的开始标签
					endTags.splice(endIndex, 1)//删除记录的当前开始标签对应的结束标签
				}
				let contents2 = JSON.parse(JSON.stringify(contents1.slice(index)))//获取文本集合，并从索引位置开始截取
				contents2 = contents2.slice(1)//去掉最后一位
				contents2.reverse()//反转文本
				const text = contents2.join('') + endTags.map(t => t.split('+')[1]).join('')//拼接结束标签
				pages[pages.length - 1].content = text.replace(new RegExp(`(${htmlChars.join('|')}):`, 'g'), '')//渲染文本
				pages[pages.length - 1].end = end + 1//记录结束位置
				const div = document.querySelector('.yingbing-page-' + pages.length)
				div.innerHTML = getContent(pages[pages.length-1].content)
				const height = div.offsetHeight
				if ( height > windowHeight ) {//如果内容高度大于窗口高度
					index++//索引+1
					handle()//继续减少文本内容
				} else {
					if ( end < contents.length - 1 ) computedPage()//如果内容还没有渲染完毕，继续计算下一页
					else handleSuccess()//页面计算完毕开始返回
				}
			}
			handle()
		}
		//成功回调
		function handleSuccess () {
			const slots1 = chapter.frontSlots || []//获取章节前置插槽
			const slots2 = chapter.backSlots || []//获取章节后置插槽
			slots1.reverse()//反转前置插槽
			//插入前置插槽
			slots1.forEach(name => {
				const start = pages.length > 0 ? pages[0].start : 2
				pages.unshift(Object.assign({}, chapter, {
					type: 'slot',
					content: name + ':' + chapter.index,
					start: start - 2,
					end: start - 1,
				}))
			})
			//插入后置插槽
			slots2.forEach(name => {
				const end = pages.length > 0 ? pages[pages.length - 1].end : -1
				pages.push(Object.assign({}, chapter, {
					type: 'slot',
					content: name + ':' + chapter.index,
					start: end + 1,
					end: end + 2,
				}))
			})
			pages = pages.map((p, key) => {
				const total = pages.length
				const current = key + 1
				const rate = 1 / totalChapter
				const progress = totalChapter ? (rate * (current / total)) + ((p.index - 1) * rate) : 0
				return Object.assign({}, p, {total: total, current: current, progress: progress * 100}, p.type == 'text' ? {contents: contents.slice(p.start, p.end).map(char => char.replace(new RegExp(`(${htmlChars.join('|')}):`), ''))} : {})
			})
			triggerMethod('handleSuccess', pages)
			document.querySelector('.yingbing-computed-wrapper').innerHTML = ''
			pages = []
			startTags = []
			contents = []
			chapter = {}
		}
		//销毁处理定时任务
		function destroyHandleTimer () {
			if ( handleTimer ) {
				window.clearTimeout(handleTimer)
				handleTimer = null
			}
		}
		function triggerMethod (name, args) {
			uni.postMessage({
				data: {
					[name]: args
				}
			});
		}
	</script>
</html>